<template>
    <div>
        <div class="logo"></div>
        <van-search
            v-model="value"
            shape="round"
            background="#ff9000"
            placeholder="请输入搜索关键词"
        />
        <div class="banner">
            <van-swipe
                class="my-swipe"
                :autoplay="2000"
                indicator-color="white"
            >
                <van-swipe-item
                    class="swiper-slide"
                    v-for="banner in banners"
                    :key="banner.id"
                >
                    <img :src="banner.image" alt="" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="types">
            <div class="type" v-for="type in types" :key="type.id" @click="totype(type.name)">
                <img :src="type.icon" alt="" />
                <p>{{ type.name }}</p>
            </div>
        </div>

        <div class="typePros">
            <div class="typePro" v-for="typePro in tp" :key="typePro.id">
                <h3>
                    <img src="../../assets/l-icon.png" alt="" />
                    {{ typePro.name }}
                    <img src="../../assets/r-icon.png" alt="" />
                </h3>
                <div
                    class="product"
                    v-for="product in typePro.products"
                    :key="product.id"
                >
                    <p>本商品产自{{ product.supplier }}</p>
                    <img :src="product.banner" alt="" />
                    <p>{{ product.name }}</p>
                    <p>商品规格:{{ product.specs }}</p>
                    <p class="price">价格:￥{{ product.price }}元</p>
                    <van-button
                        @click="addcart(product)"
                        color="linear-gradient(to right, #ff9000, #ff5000)"
                        round
                        >加入购物车</van-button
                    >
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { Search } from "vant";
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";
import { Button } from "vant";
import { getBanner, getTypes, getTP, addCart} from "@/request";
import { Swipe, SwipeItem } from "vant";
import {getCookie} from '../../utils/cookie'
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Button);
Vue.use(Search);
export default {
    data() {
        return {
            value: "",
            banners: [],
            types: [],
            tp: [],
        };
    },
    created() {
        this.qingqiu();
    },
    methods: {
        async qingqiu() {
            var banners = await getBanner();
            var types = await getTypes();
            var tp = await getTP();
            this.banners = banners;
            this.types = types;
            this.tp = tp;
        },
        addcart(product){
            var _this=this
            var username = getCookie('username')
            if(!username){
                Toast.fail({
                    message:'请先登录！',
                    onClose(){
                        window.localStorage.setItem('url','/')
                        _this.$router.push('/my/login')
                    }
                });
                return
            }
            product.username = username
            product.number = 1
            
            if(product.id){
                product.pid = product.id
                delete product.id
            }
            addCart(product).then(data=>{
                Toast.success(data.msg)
            })
        },
        totype(typename){
            this.$router.push({
                path: '/types',
                query:{
                    typename: typename
                }
            })
        }
    },

    updated() {},
};
</script>

<style scoped>
.logo {
    /* background-color: #ff6034; */
    background-color: #ff9000;
    background-image: url("../../assets/logo.png");
    background-size: 100% 100%;
    height: 50px;
}
.my-swipe {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner {
    position: relative;
    height: 200px;
}

.types{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #fff;
    margin:10px 10px 0;
  }
  .type img{
    width: 50px;
  }
  .type{
    margin: 10px 7px;
    font-family: Kaiti;
    font-weight: bold;
  }


.type p {
    text-align: center;
}

.product {
    background-color: #fff;
    padding: 10px;
    margin: 5px 10px;
    border-radius: 20px;
}

.typePro > h3 {
    text-align: center;
}

.typePro > h3 img {
    vertical-align: middle;
    margin: 0 20px;
}

.product .supplier {
    text-align: center;
    font-size: 18px;
}

.product img {
    width: 100%;
    border-radius: 20px;
}

.product .proname .product .specs {
    font-size: 18px;
    padding: 0 10px;
}

.van-button {
    display: block;
    width: 80%;
    font-size: 20px;
    margin: 0 auto;
}
.product .price {
    font-size: 20px;
    font-weight: bold;
    color: #f00;
    padding-left: 10px;
}

.product p {
    text-align: center;
}
</style>